<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>张志福-购物车</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei", "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;
			}
			
			#buy {
				border-top: 1px solid #F5F5F5;
				/*border-left: 1px solid #F5F5F5;*/
				max-width: 1226px;
				background-color: white;
				margin-bottom: 50px;
			}
			
			#buy th,
			#buy td {
				/*border-right: 1px solid #F5F5F5;*/
				border-bottom: 1px solid #F5F5F5;
				width: 1226px;
				font-weight: normal;
			}
			
			#buy #f1 {
				height: 16px;
			}
			
			thead th {
				height: 65px;
			}
			
			#buy tfoot #buy td {
				height: 99px;
				color: #424242;
			}
			
			.header {
				height: 100px;
				border-bottom: 2px solid #FF6700;
			}
			
			.main {
				width: 1226px;
				margin: 0 auto;
				/*margin-top: 35px;*/
				margin-bottom: 49px;
				border: 1px solid #F5F5F5;
			}
			
			tbody tr {
				text-align: center;
			}
			
			.top {
				margin: 0 auto;
				height: 100px;
				width: 1226px;
				/*border: 1px solid;*/
			}
			
			.top>div {
				float: left;
			}
			
			.top-left {
				width: 748px;
				height: 100px;
				/*border-right: 1px solid;*/
				position: relative;
			}
			
			.top-right {
				width: 474px;
				height: 100px;
				/*border-left: 1px solid;*/
			}
			
			.logo {
				width: 50px;
				height: 50px;
				background-color: #FF6700;
				position: absolute;
				top: 26px;
			}
			
			.mycart .sp1 {
				position: absolute;
				top: 35px;
				left: 91px;
				font-weight: bold;
				font-size: 28px;
				color: #424242;
			}
			
			.mycart .sp2 {
				position: absolute;
				top: 50px;
				left: 250px;
				font-size: 12px;
				color: #75797D;
			}
			
			.top-right li {
				float: right;
				list-style: none;
				line-height: 40px;
				font-size: 12px;
				margin-top: 27px;
				padding-left: 5px;
			}
			
			.top-right li span {
				padding-left: 5px;
			}
			
			.top-right li a {
				color: #75797D;
				text-decoration: none;
			}
			
			.body {
				background-color: #F5F5F5;
				padding-top: 35px;
			}
			
			#sum {
				height: 40px;
			}
			
			.color {
				color: #FF6700;
			}
			
			.img1 {
				border-left: 1px solid #E0E0E0;
				border-top: 1px solid #E0E0E0;
				border-bottom: 1px solid #E0E0E0;
				width: 37px;
				height: 37px;
				display: inline-block;
				background-image: url(img/1.png);
				/*position: relative;*/
				vertical-align: middle;
			}
			
			.img2 {
				border-right: 1px solid #E0E0E0;
				border-top: 1px solid #E0E0E0;
				border-bottom: 1px solid #E0E0E0;
				width: 37px;
				height: 37px;
				display: inline-block;
				background-image: url(img/2.png);
				vertical-align: middle;
			}
			.img1:hover{
				border-left: 1px solid #E0E0E0;
				border-top: 1px solid #E0E0E0;
				border-bottom: 1px solid #E0E0E0;
				width: 37px;
				height: 37px;
				display: inline-block;
				background-image: url(img/4.png);
				vertical-align: middle;
				cursor: pointer;
			}
			.img2:hover{
				border-right: 1px solid #E0E0E0;
				border-top: 1px solid #E0E0E0;
				border-bottom: 1px solid #E0E0E0;
				width: 37px;
				height: 37px;
				display: inline-block;
				background-image: url(img/3.png);
				cursor: pointer;
				vertical-align: middle;
			}
			.num {
				display: inline-block;
				text-align: center;
				outline: none;
				/*padding-top: 1px;*/
				height: 37px;
				border: none;
				border-top: 1px solid #E0E0E0;
				vertical-align: middle;
				border-bottom: 1px solid #E0E0E0;
			}
			
			.del {
				background-color: white;
				outline: none;
				border: 0;
				font-size: 20px;
				line-height: 25px;
				width: 25px;
				height: 25px;
				text-align: center;
			}
			
			.del:hover {
				background-color: #E53935;
				color: white;
				border-radius: 50%;
				cursor: pointer;
			}
			
			#showmsg {
				width: 100%;
				height: 100%;
				position: fixed;
				top: 0;
				left: 0;
				background-color: rgba(0, 0, 0, 0.8);
				display: none;
				z-index: 1;
			}
			
			.scsp {
				width: 400px;
				height: 250px;
				background-color: white;
				position: absolute;
				top: 50%;
				left: 50%;
				margin-top: -125px;
				margin-left: -200px;
			}
			
			.scsp1 {
				width: 300px;
				margin: 0 auto;
				margin-top: 30px;
				text-align: center;
				line-height: 30px;
				color: #75797D;
			}
			
			.scsp2 .span1 {
				display: inline-block;
				width: 95px;
				height: 30px;
				color: white;
				background-color: #AFAFAF;
				line-height: 30px;
				font-weight: bold;
				text-align: center;
				position: relative;
				top: 60px;
				left: -20px;
				cursor: pointer;
			}
			
			.scsp2 .span2 {
				display: inline-block;
				width: 95px;
				height: 30px;
				color: white;
				background-color: #FE6700;
				line-height: 30px;
				text-align: center;
				font-weight: bold;
				position: relative;
				top: 60px;
				left: 20px;
				cursor: pointer;
			}
			
			.guanbi {
				background-color: white;
				border: 0;
				font-size: 20px;
				line-height: 25px;
				width: 25px;
				height: 25px;
				text-align: center;
				position: relative;
				left: 170px;
				top: 20px;
				border-radius: 50%;
				display: inline-block;
			}
			
			.guanbi:hover {
				background-color: #E53935;
				color: white;
				border-radius: 50%;
				cursor: pointer;
			}
			
			.tianjia {
				width: 1084px;
				height: 40px;
				border: 1px solid #FAFAFA;
				margin-left: 100px;
				position: relative;
				cursor: pointer;
				font-size: 12px;
			}
			
			.tianjia span {
				display: inline-block;
				line-height: 40px;
				position: relative;
				right: 380px;
			}
			
			.tianjia:hover {
				background-color: #FAFAFA;
			}
			
			#add {
				margin-left: 0;
				position: absolute;
				top: 7px;
				left: 20px;
				border-radius: 50%;
				width: 28px;
				height: 28px;
				font-size: 26px;
				line-height: 28px;
				font-weight: bold;
				text-align: center;
				border: 2px solid #FF6700;
				background-color: #FF6700;
				color: white;
				outline: none;
			}
			
			#showmsg2 {
				width: 100%;
				height: 100%;
				position: fixed;
				top: 0;
				left: 0;
				background-color: rgba(0, 0, 0, 0.8);
				display: none;
				z-index: 1;
			}
			
			.er li {
				float: left;
				list-style: none;
				width: 234px;
				height: 300px;
				background-color: white;
				margin-left: 14px;
				cursor: pointer;
				text-align: center;
				cursor: pointer;
			}
			
			.er-s1 {
				display: block;
				width: 22px;
				height: 22px;
				border-radius: 50%;
				border: 1px solid #E0E0E0;
				margin: 16px;
			}
			
			.er li:hover .er-s2 {
				display: block;
				/*cursor: pointer;*/
				background-color: #E0E0E0;
				width: 16px;
				height: 16px;
				border-radius: 50%;
				margin: 3px;
			}
			
			.er-s3 {
				display: block;
				width: 22px;
				height: 22px;
				border-radius: 50%;
				border: 1px solid #FE6700;
				margin: 16px;
			}
			
			.er-s4 {
				display: block;
				background-color: #FE6700;
				width: 16px;
				height: 16px;
				border-radius: 50%;
				margin: 3px;
			}
			
			.er-name {
				color: #424242;
				line-height: 30px;
				font-size: 14px;
			}
			
			.er-price {
				line-height: 30px;
				color: #FF6700;
			}
			
			.er ul {
				width: 1226px;
				height: 300px;
				padding: 30px 0;
				margin: 0 auto;
				position: absolute;
				top: 50%;
				left: 50%;
				margin-left: -500px;
				margin-top: -220px;
			}
			
			.chance {
				width: 1226px;
				margin: 0 auto;
				font-size: 28px;
				line-height: 30px;
				margin-top: 50px;
			}
			
			.chance h3 {
				display: inline-block;
				color: white;
				position: relative;
				left: 50%;
				margin-left: -2em;
			}
			
			.chance span {
				display: inline-block;
				width: 30px;
				color: #7A7A7A;
				background-color: white;
				border-radius: 50%;
				line-height: 30px;
				position: relative;
				left: 1100px;
				text-align: center;
				cursor: pointer;
			}
			
			.chance span:hover {
				background-color: #E53935;
				color: white;
			}
			
			#adder {
				clear: both;
				width: 1226px;
				height: 40px;
				margin-top: 75%;
				margin: auto;
				position: relative;
				top: 60%;
			}
			
			#adder span {
				display: block;
				height: 40px;
				width: 160px;
				color: white;
				line-height: 40px;
				font-weight: bold;
				font-size: 12px;
				text-align: center;
				background-color: #B0B0B0;
				position: absolute;
				left: 50%;
				margin-left: -80px;
			}
			
			#adder span:hover {
				background-color: #757575;
				cursor: pointer;
			}
			
			#adder .btn {
				display: block;
				height: 40px;
				width: 160px;
				color: white;
				line-height: 40px;
				font-weight: bold;
				font-size: 12px;
				text-align: center;
				background-color: #FE6700;
				position: absolute;
				left: 50%;
				margin-left: -80px;
			}
			
			#adder .btn:hover {
				background-color: #f25807;
				cursor: pointer;
			}
			
			
			/*以上三个为复选框内容*/
			.main2{
				width: 1226px;
				margin: 0 auto;
			}
			.title{
				height: 51px;
				width: 1226px;
				border-top: 1px solid #E0E0E0;
				position: relative;
			}
			.title span{
				font-size: 30px;
				position: absolute;
    			top: -20px;
   			 	left: 372px;
   		 		height: 40px;
    			width: 482px;
    			line-height: 40px;
    			text-align: center;
    			display: block;
    			background-color: #f5f5f5;
    			color: #757575;
			}
			.shangpin {
				width: 1226px;
				overflow: hidden;
				background-color: #F5F5F5;
				/*border: 1px solid;*/
			}
			.shangpin li{
				float: left;
				list-style: none;
				display: inline-block;
				width: 234px;
				height: 300px;
				background-color: white;
				margin-left: 14px;
				margin-bottom: 14px;
				text-align: center;
				font-size: 14px;
				position: relative;
			}
			.shangpin .li1,.shangpin .li2{
				margin-left: 0;
			}
			.shangpin li img{
				margin-bottom: 15px;
				margin-top: 40px;
			}
			.shangpin .li1 img{
				margin-bottom: 0px;
				margin-top: 0px;
			}
			.shangpin li p{
				line-height: 30px;
			}
			.gary{
				color: #757575;
			}
			.shangpin li a{
				color: #333;
				text-decoration: none;
			}
			.add1{
				width: 122px;
				height: 30px;
				border: 1px solid #FE6700;
				color: #FE6700;
				text-align: center;
				line-height: 30px;
				cursor: pointer;
				position: absolute;
				bottom: 11px;
				left: 50%;
				margin-left: -61px;
				display: none;
			}
			li:hover .add1{
				display: block;
			}
			li:hover .gary{
				display: none;
			}
			.add1:hover{
				background-color: #FE6700;
				color: white;
			}
			.fxk {
				display: inline-block;
				width: 18px;
				height: 18px;
				border: 1px solid #E0E0E0;
				margin-left: 24px;
				
			}
			.hover {
				display: inline-block;
				width: 18px;
				height: 18px;
				border: 1px solid #E0E0E0;
				margin-left: 24px;
				cursor: pointer;
				background-image: url(img/select.hover.png);
			}
			
			.active {
				display: inline-block;
				width: 18px;
				height: 18px;
				margin-left: 24px;
				cursor: pointer;
				background-image: url(img/select.active.png);
				border: 1px solid #FF6700;
			}
			.qx{
				display: inline-block;
				position: relative;
				bottom: 4px;
				left: 2em;
			}
			.jixu{
				text-decoration: none;
				color: #777;
				font-size: 14px;
			}
			.jixu:hover{
				color: #FE6700;
			}
			.kkk{
				color: #777;
				font-size: 14px;
			}
			.foot{
				background-color: #FAFAFA;
				height: 438px;
			}
			.foot-top{
				background-color: white;
				height: 272px;
			}
			.foot1{
				width: 1226px;
				margin: 0 auto;
				height: 79px;
				border-bottom: 1px solid #E0E0E0;
			}
			.foot1 li{
				font-size: 16px;
				float: left;
				list-style: none;
				padding-left: 84px;
				color: #616161;
				line-height: 79px;
				height: 79px;
			}
			.foot1 li span{
				font-size: 25px;
				padding-left: 58px;
				color: #E0E0E0;
			}
			.foot2{
				width: 1226px;
				height: 187px;
				margin: 0 auto;
				margin-top: 40px;
			}
			.foot2-l{
				clear: both;
			}
			.foot2-l dl{
				float: left;
				width: 160px;
			}
			.foot2-l dl dt{
				margin-bottom: 20px;
				color: #424242;
			}
			.foot2-l dl dd{
				color: #757575;
				line-height: 30px;
				font-size: 12px;
			}
			.foot2>div{
				float: left;
			}
			.foot2r{
				width: 133px;
				height: 147px;
				margin-left: 13px;
				padding-left: 62px;
				padding-right: 57px;
				border-left: 1px solid #E0E0E0;
			}
			.fp1{
				font-size: 20px;
				color: #EF6700;
				text-align: center;
				line-height: 25px;
			}
			.fp2{
				font-size: 12px;
				color: #616161;
				text-align: center;
				line-height: 18px;
			}
			.fp3{
				height: 28px;
				width: 118px;
				line-height: 28px;
				text-align: center;
				border: 1px solid #EF6700;
				margin: 0 auto;
				margin-top: 16px;
				color: #EF6700;
				font-size: 12px;
			}
			.fp3:hover{
				background-color: #EF6700;
				color: white;
				cursor: pointer;
			}
			.foot-bottom{
				width: 1226px;
				height: 106px;
				padding: 30px 0;
				margin: 0 auto;
			}
			.foot-bottom>div{
				float: left;
			}
			.fl{
				width: 57px;
				height: 57px;
				margin-right: 10px;
				background-image: url(img/foot/logo-footer.png);
				background-position: center;
				background-repeat: none;
			}
			.fm{
				font-size: 12px;
				line-height: 18px;
			}
			.fmp1,.fmp1 a{
				color: #757575;
				text-decoration: none;
			}
			.fm a:hover{
				color: #EF6700;
			}
			.fmp2,.fmp2 a{
				text-decoration: none;
				color: #B0B0B0;
			}
			.fr{
				margin-left: 90px;
			}
			.fs{
				width: 267px;
				height: 19px;
				margin: 30px 479.5px 0 479.5px;
				margin: 0 auto;
				color: #333333;
				position: relative;
			}
			.fs img{
				position: absolute;
				top: -50px;
			}
		</style>
	</head>

	<body>
		<div class="header">
			<div class="top">
				<div class="top-left">
					<div class="logo">
						<a href="#" id="logo" onmouseover="replace()" onmouseout="replace2()"><img src="img/mi-logo.png" /></a>
					</div>
					<div class="mycart">
						<span class="sp1">我的购物车</span><span class="sp2">温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算</span>
					</div>
				</div>
				<div class="top-right">
					<ul>
						<li>
							<a href="xm-zc.html">注册</a>
						</li>
						<li>
							<a href="xm-sign.html">登录</a><span>|</span></li>
					</ul>
				</div>
			</div>
		</div>
		<div class="body">

			<div class="main">

				<table id="buy" cellpadding="0" cellspacing="0" align="center">
					<thead>
						<tr>
							<th width="110px" align="left"><span class="fxk" id="quanxuan" onclick="qx(this)"></span><span class="qx">全选</span></th>
							<th width="120"></th>
							<th width="380">商品名称</th>
							<th width="158">单价/元</th>
							<th width="150">数量</th>
							<th width="200">小计</th>
							<th width="106">操作</th>
						</tr>
					</thead>
					<tbody>
						<tr align="center">
							<td align="left"><span class="fxk" onclick="xianZhe(this)" onmouseover="onMover(this)" onmouseout="onMout(this)"></span></td>
							<td><img src="img/pms_1499419288.70963423!80x80.jpg" /></td>
							<td>红米note 4x</td>
							<td>999</td>
							<td><span class="img1"  onclick="jian(this)"></span><input type="text" class="num" size="2" value="1" onchange="update()" /><span onclick="jia(this)" class="img2"></span></td>
							<td class="color">999</td>
							<td>
								<div id="showmsg">
									<div class="scsp">
										<div>
											<span class="guanbi" onclick="guanbi()">×</span>
										</div>
										<div class="scsp1">
											<p>该商品参与了优惠活动，删除后可能无法获得优惠商品，确认删除吗？</p>
										</div>
										<div class="scsp2">
											<span class="span1" onclick="guanbi()">取消</span><span class="span2" onclick="del(this.parentNode.parentNode.parentNode.parentNode.parentNode)">确认</span>
										</div>
									</div>
								</div><input type="button" class="del" id="" value="×" onclick="showmsg()" /></td>
						</tr>
						<tr>
							<td align="left"><span class="fxk" onclick="xianZhe(this)" onmouseover="onMover(this)" onmouseout="onMout(this)"></span></td>
							<td><img src="img/pms_1490088811.16427079!80x80.jpg" /></td>
							<td>小米 MIX</td>
							<td>3499</td>
							<td><span class="img1"  onclick="jian(this)"></span><input type="text" class="num" size="2" value="1" onchange="update()" /><span onclick="jia(this)" class="img2"></span></td>
							<td class="color">3499</td>
							<td>
								<div id="showmsg">
									<div class="scsp">
										<div>
											<span class="guanbi" onclick="guanbi()">×</span>
										</div>
										<div class="scsp1">
											<p>该商品参与了优惠活动，删除后可能无法获得优惠商品，确认删除吗？</p>
										</div>
										<div class="scsp2">
											<span class="span1" onclick="guanbi()">取消</span><span class="span2" onclick="del(this.parentNode.parentNode.parentNode.parentNode.parentNode)">确认</span>
										</div>
									</div>
								</div><input type="button" id="" class="del" value="×" onclick="showmsg()" /></td>

						</tr>
						<tr>
							<td align="left"><span class="fxk" onclick="xianZhe(this)" onmouseover="onMover(this)" onmouseout="onMout(this)"></span></td>
							<td><img src="img/pms_1495692033.10494295!80x80.jpg" /></td>
							<td>小米Max 2</td>
							<td>1699</td>
							<td><span class="img1"  onclick="jian(this)"></span><input type="text" class="num" size="2" value="1" onchange="update()" /><span onclick="jia(this)" class="img2"></span></td>
							<td class="color">1699</td>
							<td>
								<div id="showmsg">
									<div class="scsp">
										<div>
											<span class="guanbi" onclick="guanbi()">×</span>
										</div>
										<div class="scsp1">
											<p>该商品参与了优惠活动，删除后可能无法获得优惠商品，确认删除吗？</p>
										</div>
										<div class="scsp2">
											<span class="span1" onclick="guanbi()">取消</span><span class="span2" onclick="del(this.parentNode.parentNode.parentNode.parentNode.parentNode)">确认</span>
										</div>
									</div>
								</div><input type="button" id="" class="del" value="×" onclick="showmsg()" /></td>

						</tr>
					</tbody>
					<tfoot>
						<tr>
							<th colspan="7">
								<div class="tianjia" onclick="tianjia()">
									<input type="button" id="add" value="+" /><span>+25元得小米活塞耳机 清新版 25元</span>
								</div>
							</th>
						</tr>
						<tr bgcolor="#F5F5F5" id="f1">
							<th></th>
							<th></th>
							<th></th>
							<th></th>
							<th></th>
							<th></th>
							<th></th>
						</tr>
						<tr id="sum">
							<th><a href="#" class="jixu">继续购物</a></th>
							<th class="kkk">共<span style="color: #FE6700;">0</span>件商品，已选择<span style="color: #FE6700;">0</span>件</th>
							<th> </th>
							<th> </th>
							<th class="color" style="font-size: 12px; text-align: right;">合计（不含运费）：</th>
							<th class="color" style="font-size: 28px; font-weight: 400;">0</th>
							<th bgcolor="#FF6700" style="color: white;font-size: 24px;cursor: pointer;">去结算</th>

						</tr>
					</tfoot>

				</table>
			</div>
			<div class="main2">
					<div class="title">
						<span>买购物车中商品的人还买了</span>
					</div>	
					<div class="shangpin">
						<ul>
							<li class="li1"><a href="#"><img src="img/gouwuche!234x300.jpg"/></a></li>
							<li>
								<img src="img/T1ycK_BjYv1RXrhCrK!140x140.jpg"/>
								<p><a href="#">小米圈铁耳机</a></p>
								<p class="color"><span>99</span><span>元</span></p>
								<p class="gary">4.1万人好评</p>
								<div class="add1" onclick="adds(this)">
									<span>加入购物车</span>
								</div>
							</li>
							<li>
								<img src="img/pms_1490088813.05223210!140x140.jpg"/>
								<p><a href="#">小米MIX 尊享版 全面屏概念手机</a></p>
								<p class="color"><span>3999</span><span>元</span></p>
								<p class="gary">1.7万人好评</p>
								<div class="add1" onclick="adds(this)">
									<span>加入购物车</span>
								</div>
							</li>
							<li>
								<img src="img/pms_1490088813.05223210!140x140.jpg"/>
								<p><a href="#">小米MIX 尊享版 全面屏概念手机</a></p>
								<p class="color"><span>3999</span><span>元</span></p>
								<p class="gary">1.7万人好评</p>
								<div class="add1" onclick="adds(this)">
									<span>加入购物车</span>
								</div>
							</li>
							<li>
								<img src="img/pms_1490088813.05223210!140x140.jpg"/>
								<p><a href="#">小米MIX 尊享版 全面屏概念手机</a></p>
								<p class="color"><span>3999</span><span>元</span></p>
								<p class="gary">1.7万人好评</p>
								<div class="add1" onclick="adds(this)">
									<span>加入购物车</span>
								</div>
							</li>
						</ul>
					</div>
					<div class="shangpin">
						<ul>
							<li class="li2"><img src="img/pms_1490088813.05223210!140x140.jpg"/>
								<p><a href="#">小米MIX 尊享版 全面屏概念手机</a></p>
								<p class="color"><span>3999</span><span>元</span></p>
								<p class="gary">1.7万人好评</p>
								<div class="add1" onclick="adds(this)">
									<span>加入购物车</span>
								</div></li>
							<li>
								<img src="img/T1ycK_BjYv1RXrhCrK!140x140.jpg"/>
								<p><a href="#">小米圈铁耳机</a></p>
								<p class="color"><span>99</span><span>元</span></p>
								<p class="gary">4.1万人好评</p>
								<div class="add1" onclick="adds(this)">
									<span>加入购物车</span>
								</div>
							</li>
							<li>
								<img src="img/pms_1490088813.05223210!140x140.jpg"/>
								<p><a href="#">小米MIX 尊享版 全面屏概念手机</a></p>
								<p class="color"><span>3999</span><span>元</span></p>
								<p class="gary">1.7万人好评</p>
								<div class="add1" onclick="adds(this)">
									<span>加入购物车</span>
								</div>
							</li>
							<li>
								<img src="img/pms_1490088813.05223210!140x140.jpg"/>
								<p><a href="#">小米MIX 尊享版 全面屏概念手机</a></p>
								<p class="color"><span>3999</span><span>元</span></p>
								<p class="gary">1.7万人好评</p>
								<div class="add1" onclick="adds(this)">
									<span>加入购物车</span>
								</div>
							</li>
							<li>
								<img src="img/pms_1490088813.05223210!140x140.jpg"/>
								<p><a href="#">小米MIX 尊享版 全面屏概念手机</a></p>
								<p class="color"><span>3999</span><span>元</span></p>
								<p class="gary">1.7万人好评</p>
								<div class="add1" onclick="adds(this)">
									<span>加入购物车</span>
								</div>
							</li>
						</ul>
					</div>
			</div>

			<div id="showmsg2">
				<div class="chance">
					<h3>选择产品</h3>
					<span onclick="cls()">×</span>
				</div>
				<div class="er" id="items">
					<ul>
						<li onclick="activeLi(this)">
							<span class="er-s1"><span class="er-s2"></span></span>
							<img src="img/xmrj.jpg" />
							<p class="er-name">小米活塞耳机 清新版 黑色</p>
							<p class="er-price"><span>25</span><span>元</span></p>
						</li>
						<li onclick="activeLi(this)">
							<span class="er-s1"><span class="er-s2"></span></span>
							<img src="img/pms_1482321205.78014235!220x220.jpg" width="140" />
							<p class="er-name">小米活塞耳机 清新版 白色</p>
							<p class="er-price"><span>25</span><span>元</span></p>
						</li>
						<li onclick="activeLi(this)">
							<span class="er-s1"><span class="er-s2"></span></span>
							<img src="img/pms_1482321209.75977825!220x220.jpg" width="140" />
							<p class="er-name">小米活塞耳机 清新版 粉色</p>
							<p class="er-price"><span>25</span><span>元</span></p>
						</li>
						<li onclick="activeLi(this)">
							<span class="er-s1"><span class="er-s2"></span></span>
							<img src="img/pms_1482321212.47485716!220x220.jpg" width="140" />
							<p class="er-name">小米活塞耳机 清新版 紫色</p>
							<p class="er-price"><span>25</span><span>元</span></p>
						</li>
					</ul>
				</div>
				<div id="adder">
					<span onclick="btnadd()">加入购物车</span>
				</div>
			</div>
		</div>
		<div class="foot">
				<div class="foot-top">
					<div class="foot1">
						<ul>
							<li>预约维修服务<span>|</span></li>
							<li>7天无理由退货<span>|</span></li>
							<li>15天免费换货<span>|</span></li>
							<li>满150元包邮<span>|</span></li>
							<li>520余家售货网点</li>
						</ul>
					</div>
					<div class="foot2">
						<div class="foot2-l">
							<dl>
								<dt>帮助中心</dt>
								<dd>账户管理</dd>
								<dd>购物指南</dd>
								<dd>订单操作</dd>
							</dl>
							<dl>
								<dt>服务支持</dt>
								<dd>售后政策</dd>
								<dd>自助服务</dd>
								<dd>相关下载</dd>
							</dl>
							<dl>
								<dt>线下门店</dt>
								<dd>小米之家</dd>
								<dd>服务网点</dd>
								<dd>零售网点</dd>
							</dl>
							<dl>
								<dt>关于小米</dt>
								<dd>了解小米</dd>
								<dd>加入小米</dd>
								<dd>联系我们</dd>
							</dl>
							<dl>
								<dt>关注我们</dt>
								<dd>新浪微博</dd>
								<dd>小米部落</dd>
								<dd>官方微信</dd>
							</dl>
							<dl>
								<dt>特色服务</dt>
								<dd>F码通道</dd>
								<dd>礼物码</dd>
								<dd>防伪查询</dd>
							</dl>
						</div>
						<div class="foot2r">
							<p class="fp1">400-100-5678</p>
							<p class="fp2">周一至周日 8:00-18:00</p>
							<p class="fp2">（仅收市话费）</p>
							<p class="fp3">24小时在线客服</p>
						</div>
					</div>
				</div>
				<div class="foot-bottom">
					<div class="fl">
						
					</div>
					<div class="fm">
						<p class="fmp1"><a href="#">小米商城</a> <span>|</span> <a href="#">MIUI</a> <span>|</span> <a href="#">米聊</a> <span>|</span> <a href="#">多看书城</a> <span>|</span> <a href="#">小米路由器</a> <span>|</span> <a href="#">视频电话</a> <span>|</span> <a href="#">小米天猫店</a> <span>|</span> <a href="#">小米淘宝直营店</a> <span>|</span> <a href="#">小米网盟</a> <span>|</span> <a href="#">小米移动</a> <span>|</span> <a href="#">隐私政策</a> <span>|</span> <a href="#">Select Region</a></p>
						<p class="fmp2">&copy;<a href="#">mi.com</a> 京ICP证110507号 <a href="#">京ICP备10046444号</a> <a href="#">京公网安备11010802020134号</a> <a href="#">京网文[2014]0059-0009号</a> </p>
						<p class="fmp2">违法和不良信息举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p>
					</div>
					<div class="fr">
						<a href="#"><img width="85" height="28px" src="img/foot/truste.png"/></a><a href="#"><img src="img/foot/v-logo-2.png"/></a><a href="#"><img src="img/foot/v-logo-1.png"/></a><a href="#"><img src="img/foot/v-logo-3.png"/></a>
					</div>
					
				</div>
				<div class="fs">
					<img src="img/foot/slogan2016.png"/>
				</div>
			</div>
		<script type="text/javascript">
			var all = document.getElementById("quanxuan")
			var buy = document.getElementById("buy");
			var spans1 = document.querySelectorAll("td .fxk")
			function xianZhe(t){
				if(t.className!="active"){
						t.className="active"
					}else{
						t.className="hover"
					}
						update();
						zongji();
						zongji2();
			}
			function onMover(t){
				if(t.className!="active"){
						t.className="hover"
					}
			}
			function onMout(t){
				if(t.className=="hover"){
						t.className="fxk"
					}
			}
//			for (var i = 0; i < spans1.length; i++) {
//				spans1[i].onmouseover=function(){
//					if(this.className!="active"){
//						this.className="hover"
//					}
//				}
//				spans1[i].onmouseout=function(){
//					if(this.className=="hover"){
//						this.className="fxk"
//					}
//				}
//				spans1[i].onclick=function(){
//					if(this.className!="active"){
//						this.className="active"
//						update();
//						
//						
//					}else{
//						this.className="hover"
//					}
//					if(this.className=="active"){
//
//						console.log("1")
//					}
//				}
//				
//			}
			all.onmouseover=function(){
				if(this.className!="active"){
						this.className="hover"
					}
			}
			all.onmouseout=function(){
				if(this.className=="hover"){
						this.className="fxk"
					}
			}
			function qx (t){
				if(t.className!="active"){
				t.className="active"
				var trs5 = buy.children[1].children;
				for (var i = 0; i < trs5.length; i++) {
					trs5[i].children[0].children[0].className="active"
					update();
					zongji();
					zongji2();
				}
				}else{
					t.className="hover"
				var trs5 = buy.children[1].children;
				for (var i = 0; i < trs5.length; i++) {
					trs5[i].children[0].children[0].className="fxk"
					update();
					zongji();
					zongji2();
				}
				}
			}
			function update() {
				var trs = buy.children[1].children
				for(var i = 0; i < trs.length; i++) {
					var dj = trs[i].children[3].innerHTML;
					var num = trs[i].children[4].children[1].value;
					var sum = dj * num;
					trs[i].children[5].innerHTML = sum
					lastsum();
				}
			}

			function lastsum() {
				var sum = 0
				var trs7 = buy.children[1].children

				for(var i = 0; i < trs7.length; i++) {
					if(trs7[i].firstElementChild.firstElementChild.className=="active") {
						sum += parseFloat(trs7[i].children[5].innerHTML)
					}
					//					console.log(sum)
					var all1 = document.getElementById("sum")
					all1.children[5].innerHTML = sum
				}
			}
			function del(t) {
				buy.children[1].removeChild(t);
				update();
				zongji();
				zongji2();
			}

			function replace() {
				var logo = document.getElementById("logo")
				var img = document.createElement("img");
				img.src = "img/mi-home.png"
				logo.replaceChild(img, logo.firstElementChild)
			}

			function replace2() {
				var logo = document.getElementById("logo")
				var img2 = document.createElement("img");
				img2.src = "img/mi-logo.png"
				logo.replaceChild(img2, logo.firstElementChild)
			}

			function jian(t) {
				var td = t.parentNode
				var num = td.children[1].value
				var num1 = parseInt(num)
				if(num1 == 1) {
					td.children[1].value = 1
				} else {
					td.children[1].value = num1 - 1
				}
				update();
				zongji();
				zongji2();
			}

			function jia(t) {
				var td = t.parentNode
				var num = td.children[1].value
				var num1 = parseInt(num)
				td.children[1].value = num1 + 1
				update();
				zongji();
				zongji2();
			}

			function showmsg() {
				document.getElementById("showmsg").style.display = "block"
			}

			function guanbi() {
				document.getElementById("showmsg").style.display = "none"
			}

			function tianjia() {
				document.getElementById("showmsg2").style.display = "block"
			}

			function cls() {
				document.getElementById("showmsg2").style.display = "none"
			}

			function activeLi(t) {
				var sel1 = t.children[0];
				var sel2 = t.children[0].children[0];
				var lis = t.parentNode.children;
				var btn = document.getElementById("adder")
				for(var i = 0; i < lis.length; i++) {
					lis[i].children[0].className = "er-s1";
					lis[i].children[0].children[0].className = "er-s2"
				}
				if(sel1.className == 'er-s1') {
					sel1.className = "er-s3";
					sel2.className = "er-s4";
				}
				btn.children[0].className = "btn"
			}

			function btnadd() {
				var div = document.getElementById("items");
				var lis = div.getElementsByTagName("li");
				for (var i = 0; i < lis.length; i++) {
					var name = lis[i].children[0].className;
					if(name == "er-s3"){
						var tr = document.createElement("tr");
						tr.innerHTML = "<td align='left'><span class='fxk' onclick='xianZhe(this)' onmouseover='onMover(this)' onmouseout='onMout(this)'></span></td>";
						tr.innerHTML +="<td><img width='80' src='"+lis[i].children[1].src+"'</td>";
						tr.innerHTML +="<td>"+lis[i].children[2].innerHTML+"</td>";
						tr.innerHTML +="<td>"+parseInt(lis[i].children[3].children[0].innerHTML)+"</td>";
						tr.innerHTML +="<td><span class='img1'  onclick='jian(this)'></span><input class='num' type='text'  size='2' value='1' onchange='update()'/><span onclick='jia(this)' class='img2'></span></td>";
						tr.innerHTML +="<td class='color'>"+parseInt(lis[i].children[3].children[0].innerHTML)+"</td>";
						tr.innerHTML += "<td><div id='showmsg'> <div class = 'scsp'><div><span class = 'guanbi'onclick = 'guanbi()'> × </span> </div> <div class = 'scsp1' ><p> 该商品参与了优惠活动， 删除后可能无法获得优惠商品， 确认删除吗？ </p> </div> <div class = 'scsp2' ><span class = 'span1'onclick = 'guanbi()'> 取消 </span><span class='span2' onclick='del(this.parentNode.parentNode.parentNode.parentNode.parentNode)'>确认</span ></div></div></div><input type='button' class='del'  value='×' onclick='showmsg()'/> </td>"
						buy.children[1].appendChild(tr)
					}
				}
				zongji();
				zongji2();
			}
			
		function adds (t){
				var lis1 = t.parentNode;
				var tr1 = document.createElement("tr");
				tr1.innerHTML = "<td align='left'><span class='fxk' onclick='xianZhe(this)' onmouseover='onMover(this)' onmouseout='onMout(this)'></span></td>";
				tr1.innerHTML +="<td><img width='80' src='"+lis1.children[0].src+"'</td>";
				tr1.innerHTML +="<td>"+lis1.children[1].children[0].innerHTML+"</td>";
				tr1.innerHTML +="<td>"+parseInt(lis1.children[2].children[0].innerHTML)+"</td>";
				tr1.innerHTML +="<td><span class='img1'  onclick='jian(this)'></span><input class='num' type='text'  size='2' value='1' onchange='update()'/><span onclick='jia(this)' class='img2'></span></td>";
				tr1.innerHTML +="<td class='color'>"+parseInt(lis1.children[2].children[0].innerHTML)+"</td>";
				tr1.innerHTML += "<td><div id='showmsg'> <div class = 'scsp'><div><span class = 'guanbi'onclick = 'guanbi()'> × </span> </div> <div class = 'scsp1' ><p> 该商品参与了优惠活动， 删除后可能无法获得优惠商品， 确认删除吗？ </p> </div> <div class = 'scsp2' ><span class = 'span1'onclick = 'guanbi()'> 取消 </span><span class='span2' onclick='del(this.parentNode.parentNode.parentNode.parentNode.parentNode)'>确认</span ></div></div></div><input type='button' class='del'  value='×' onclick='showmsg()'/> </td>"
				buy.children[1].appendChild(tr1);
				zongji();
				zongji2();
			}
		function zongji(){
			var trs8 = buy.children[1].children
			var num9 = 0
			for (var i = 0; i < trs8.length; i++) {
				if(trs8[i].children[0].children[0].className=="active"){
				 num9 += parseInt(trs8[i].children[4].children[1].value);
				}
			}
			buy.children[2].children[2].children[1].children[1].innerHTML=num9;
		}
		function zongji2(){
			var trs9 = buy.children[1].children
			var num8 = 0
			for (var i = 0; i < trs9.length; i++) {
				num8 += parseInt(trs9[i].children[4].children[1].value)
				buy.children[2].children[2].children[1].children[0].innerHTML=num8;
			}
		}
		zongji2();
		zongji();
		</script>
	</body>

</html>